<template>
  <view class="page-container">
    <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
    <NavBar showBack floating title="订单支付"></NavBar>
  <PaySwiper :swiperList="carInfo.model_images || []"></PaySwiper>
  <view class="detail-page">
    <view class="detail-step">
      <view class="step-item">
        <image class="step-icon" :src="getImageSrc('static/icons/icon-down.png')"></image>
        <view>确认配置</view>
      </view>
      <view class="line"></view>
      <view class="step-item">
        <image class="step-icon" :src="getImageSrc('static/icons/icon-down.png')"></image>
        <view>确认个人信息</view>
      </view>
      <view class="line"></view>
      <view class="step-item">
        <image class="step-icon" :src="getImageSrc('static/icons/icon-down.png')"></image>
        <view>定金支付</view>
      </view>
    </view>

    <Title icon="title-icon1" title="订单填写"></Title>
    <view class="car-info">
      <image class="car-img" :src="carInfo?.image"></image>
      <view class="info-right">
        <view class="tit two-ellipsis">{{ carInfo?.brand_name }}{{ carInfo?.title }}</view>
        <view class="addr">
          <text>售价</text>
          <text class="price">{{ getPrice(carInfo?.price) }}</text>
          <text>万起</text>
        </view>
      </view>
    </view>
    <view class="sub-cell">
      <view class="left">姓名</view>
      <!-- <view class="right f-w">{{  }}</view> -->
      <input class="right t-right f-w" placeholder-style="font-weight: 400;" v-model="params.realName"
        placeholder="请输入您的姓名" />
    </view>
    <view class="sub-cell">
      <view class="left">电话</view>
      <!-- <view class="right f-w">{{  }}</view> -->
      <input class="right t-right f-w" placeholder-style="font-weight: 400;" v-model="params.mobile"
        placeholder="请输入您的电话" type="number" confirm-type="done"/>
    </view>
    <view class="sub-cell">
      <view class="left">选择门店</view>
      <input class="right t-right f-w right-arrows-bg" placeholder-style="font-weight: 400;"
        v-model="paramsNames.shopName" @click="showNearByDealerPopup = true" disabled placeholder="请选择附近的门店" />
    </view>
    <view class="sub-cell">
      <view class="left">预约时间</view>
      <input class="right t-right f-w right-arrows-bg" placeholder-style="font-weight: 400;" v-model="params.appointTime"
        disabled placeholder="请选择预约时间" @click="chooseDay = true" />
    </view>
    <view class="sub-cell">
      <view class="left">订单金额</view>
      <view class="right">
        <text class="uit">￥</text>
        <text class="price">{{ carInfo?.deposit }}</text>
        <!-- <text class="uit">万</text> -->
      </view>
    </view>
  </view>
  <view class="bottom-btn">
    <view class="btn" @click="onPay">确认</view>
  </view>
  <NearbyDealerPopup v-model:show="showNearByDealerPopup" title="选择附近门店" v-model:shopid="params.shopId"
    v-model:name="paramsNames.shopName"></NearbyDealerPopup>
  <ChooseRili v-model:show="chooseDay" title="预约到店时间" v-model:current="params.appointTime"> </ChooseRili>
  </view>
</template>


<script setup>
import { onMounted, ref, watch } from "vue"
import NavBar from "@/components/ui/nav-bar"
import Title from "@/components/ui/title"
import service from "@/path/service"
import { router } from "@/path/router";
import PaySwiper from "./swiper/index.vue"
import NearbyDealerPopup from "@/components/tool/nearby-dealer/popup.vue"
import { getImageSrc } from '@/path/until';
import ChooseRili from "@/components/tool/choose-rili"
import { useUserInfoStore } from '@/path/store/userInfo';
const userStore = useUserInfoStore()
const customerPhone=ref(userStore.userInfo.mobile?userStore.userInfo.mobile:'')
const carInfo = ref({})
const showNearByDealerPopup = ref(false)
const chooseDay = ref(false)
const params = ref({
  carId: "",
  shopId: "",
  appointTime: "",
  realName: "",
  mobile: customerPhone,
})
const paramsNames = ref({
  shopName: "",
})
onMounted(() => {
  const routerData = router.getData()
  if (!routerData?.info) return
  carInfo.value = routerData?.info
  params.value.carId = routerData?.info?.id
})

// watch(() => userStore.userInfo, () => {
//   params.value = {
//     ...params.value,
//     /**联系电话 */
//     mobile: userStore.userInfo.mobile,
//     /**联系人 */
//     realName: userStore.userInfo.username,
//   }
// }, { immediate: true })
function onPay() {
  if (!params.value.realName) {
    uni.showToast({
      title: "请输入您的真实姓名",
      icon: "none"
    })
    return
  }
  if (!params.value.mobile) {
    uni.showToast({
      title: "请输入您的联系电话",
      icon: "none"
    })
    return
  }
  if (!params.value.shopId) {
    uni.showToast({
      title: "请选择预约店铺",
      icon: "none"
    })
    return
  }
  service.post("api/ycg/usercenter/addorder", params.value).then((res) => {
    return service.post("api/ycg/usercenter/jspay", { order_id: res.order_id })
  }).then((res) => {
    return uni.requestPayment(res.jsParams)
  }).then(() => {
    router.redirect({
      url: "/pages/mine/order/index"
    })
  })
}


function getPrice(num = 0) {
  return (num / 10000).toFixed(2) * 1
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>

